<template>
  <el-dialog v-model="showAdd" title="编辑商品分类" @open="OpenDia" @close="CloseDia">
    <template #footer>
      <el-button @click="showAdd=false">取消</el-button>
      <el-button type="primary" @click="Addsubmit">确定</el-button>
    </template>
    <el-form style="width: 400px;margin-left: 200px"
             ref="AddForm"
             :rules="rules"
             :model="AddData"
             v-loading="loading"
    >
      <el-form-item label="分类名称:" prop="name">
        <el-input v-model="AddData.name"/>
      </el-form-item>
      <el-form-item label="上级分类:" prop="good_id">
        <el-tree-select
            :props="defaultProps"
            v-model="AddData.good_id"
            :data="AddData.SortOptions"
            check-strictly
            :render-after-expand="false"
        />
      </el-form-item>
      <el-form-item label="分类图片:" prop="pic">
        <img :src="AddData.pic" style="width: 100px;height: 100px;margin-right: 10px" v-if="AddData.pic">
        <el-upload
            ref="upload"
            class="upload-demo"
            action="http://api_devs.wanxikeji.cn/api/savePic"
            :on-success="uploadImg"
            :show-file-list="false"
            name="img"
        >
          <el-icon class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="状态:" prop="statusRadio">
        <el-radio-group v-model="AddData.statusRadio">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序:">
        <el-input v-model="AddData.sort"></el-input>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import {getGoodsTypeList} from "../../../HTTP/api/goods";
import {getPermissionListArr} from "@/util/getUser";
import {ElMessage} from "element-plus";
import {addGoodType} from "../../../HTTP/api/goods";

const statusRadio = ref()
const emit = defineEmits(["successAdd"])
let loading = ref(true)
let showAdd = ref(false)
let AddForm = ref(null)
let AddData = reactive({
  SortOptions: [],
  good_id: '',
  pic: '',
  name: '',
  statusRadio: 1,
  sort: 100,
  id: ''
})
let AllData
const rules = reactive({
  name: [{required: true, message: '分类名称不能为空', trigger: 'blur'}],
  statusRadio: [{required: true, message: '请选择状态', trigger: 'blur'}]
})
defineExpose({
  showAdd
})
const define = defineProps(['goodsInfo'])
//打开事件
const OpenDia = () => {
  console.log(define.goodsInfo)
  AddData.name = define.goodsInfo.type_name
  AddData.pic = define.goodsInfo.pic
  AddData.good_id = define.goodsInfo.parent_id
  AddData.id = define.goodsInfo.good_type_id
  getGoodsTypeList().then(res => {
    if (res.code === 2000) {
      AllData = res.data
      console.log("haha",res.data)
      AddData.SortOptions = getPermissionListArr(res.data)
      console.log(AddData.SortOptions)
      AddData.SortOptions.unshift({
            good_type_id: 0,
            type_name: '顶级分类',
            parent_id: 0,
          }
      )
      console.log(AddData.SortOptions)
    } else {
      ElMessage.error("数据异常")
      showAdd.value = false
    }
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
}
//关闭
const CloseDia = () => {
  AddForm.value.resetFields()
  loading.value = true
}
const uploadImg = (res) => {
  if (res.code === 2000) {
    AddData.pic = "http://api_devs.wanxikeji.cn/" + res.data
  }
}
//提交
const Addsubmit = () => {
  AddForm.value.validate(vaild => {
    if (vaild) {
      const {name, good_id, pic, id} = AddData
      let pid = 0
      if (good_id) {
        AllData.forEach(item => {
          if (item.good_type_id === good_id) {
            pid = item.good_type_id
          }
        })
      }
      addGoodType({name, pic, pid, id}).then(res => {
        if (res.code === 2000) {
          ElMessage({
            type: 'success',
            message: '修改成功'
          })
          emit('successEdit')
          showAdd.value = false
        } else {
          ElMessage.error("修改失败")
          showAdd.value = false
        }
      })
    } else {
      return false
    }
  })
}
const defaultProps = {
  children: 'children',
  label: 'type_name',
  value: 'good_type_id'
}
</script>

<style scoped>

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
</style>
